<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            text-align: center;
            margin: 50px 0;

        }

        .box input {
            height: 30px;
            padding-left: 10px;

        }

        table {
            width: 800px;
            border: 1px solid #222;
            border-collapse: collapse;
            border-spacing: 0;
            margin: 0 auto;
        }

        table caption {
            margin-bottom: 20px;
            font-size: 20px;
        }

        table th,
        table td {
            border: 1px solid #222;
            padding: 5px 0;
            text-align: center;
        }

        table th {
            padding: 10px 0;
        }
    </style>
    </head>

    <body>
        <!-- 
        5、根据用户输入内容创建员工信息表
      -->
        <div class="box">
            id: <input type="text" id="id">
            用户名：<input type="text" id="username">
            年龄： <input type="text" id="age">
            <input type="button" value="添加" id="btnadd">
        </div>

        <table>
            <caption>员工信息表</caption>
            <thead>
                <tr>
                    <th>id</th>
                    <th>用户名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <!-- 数据 动态添加 单击一次添加一行 -->
            </tbody>
        </table>
        <script>
            //1.查
            var id = document.querySelector('#id');
            var username = document.querySelector('#username');
            var age = document.querySelector('#age');
            var btnadd = document.querySelector('#btnadd');
            var tbody = document.querySelector('#tbody');
            //2.加事件
            btnadd.onclick = function () {
                if (id.value.trim().length == 0 || username.value.trim().length == 0 || age.value.trim().length == 0) {
                    alert('数据不能为空')
                } else {
                    //1.创建行
                    var tr = document.createElement('tr');
                    var td1 = document.createElement('td');
                    var td2 = document.createElement('td');
                    var td3 = document.createElement('td');
                    var td4 = document.createElement('td');
                    td1.innerHTML = id.value;
                    td2.innerHTML = username.value;
                    td3.innerHTML = age.value;
                    td4.innerHTML = '<a href="javascript:;" class="del">删除</a>'

                    tr.appendChild(td1);
                    tr.appendChild(td2)
                    tr.appendChild(td3)
                    tr.appendChild(td4)

                    tbody.appendChild(tr);
                    id.value = ''
                    username.value = '';
                    age.value = ''
                }

            }

            // 做删除操作
            var dels = document.querySelectorAll('.del');
            // for(var i=0;i<dels.length;i++){
            //      dels[i].onclick=function(){
            //         this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)
            //      }
            // }
            // 事件委托   利用的原理冒泡  e事件对象
            tbody.onclick = function (e) {
                console.log(e);
                console.log(e.target);//单击的目标元素
                if (e.target.className === 'del') {
                    e.target.parentNode.parentNode.parentNode.removeChild(e.target.parentNode.parentNode)
                }

            }



        //    id.value.trim().length==0   表示  很多空格   者没打数据
        </script>
    </body>

</html>